em
<template>
  <!-- 我的收藏 -->
  <div
    class="collect-btn flex flex-cc click"
    @click="mitt.emit('dialog:collect', { type: 1, visible: true })"
    v-if="source?.type === 'collect'"
  >
    <div class="flex-fs-0 mr-15">
      <BaseImage
        class="kang-avatar"
        src="@/kang/img/collect_avatar.png"
      ></BaseImage>
    </div>

    <div class="flex-1">
      <div class="flex flex-rb flex-cc">
        <div class="fw-bold">我的收藏</div>
        <div class="fz-10 cl-basic" v-if="source?.conversation?.timestamp">
          {{ dayjs(source?.conversation?.timestamp).format('MM/DD') }}
        </div>
      </div>
      <div class="cl-basic fz-12 hide-1">
        <!-- 来源 -->
        <span>{{ source?.conversation?.origin }}：</span>

        <!-- 文字 -->
        <span v-if="source?.conversation?.type === 1">
          {{ source?.conversation?.title }}
        </span>

        <!-- 图片 -->
        <span v-else-if="source?.conversation?.type === 3">[图片]</span>

        <!-- 视频 -->
        <span v-else-if="source?.conversation?.type === 6">[视频]</span>

        <!-- 文件 -->
        <span v-else-if="source?.conversation?.type === 5">[文件]</span>
      </div>
    </div>
  </div>

  <!-- 会话 -->
  <div
    class="conversation-item-container"
    @dragover="dragEvent($event, 'dragover')"
    @dragleave="dragEvent($event, 'dragleave')"
    @dragenter="dragEvent($event, 'dragenter')"
    @drop="dragEvent($event, 'drop')"
    @click="showConversation"
    v-bind:class="{
      drag: dragAndDropEnterCount > 0,
      active:
        shareConversationState.currentConversationInfo &&
        shareConversationState.currentConversationInfo.conversation.equal(
          source.conversation
        ),
      top: source.top,
      highlight:
        shareConversationState.contextMenuConversationInfo &&
        shareConversationState.contextMenuConversationInfo.conversation.equal(
          source.conversation
        ),
    }"
    @contextmenu.prevent="showConversationInfoContextMenu"
    v-else
  >
    <div class="conversation-item">
      <div class="header">
        <img
          class="kang-avatar"
          draggable="false"
          :src="portrait"
          alt=""
          @error="imgUrlAlt"
        />
        <em
          class="red-dot"
          style="top: -5px; left: -5px"
          v-bind:class="{ silent: source.isSilent }"
          v-if="unread > 0"
        >
          {{ unread > 99 ? '···' : unread }}
        </em>
      </div>
      <div class="content-container">
        <div class="title-time-container">
          <i
            v-if="source.conversation.type === 5"
            class="icon-ion-android-lock"
            style="padding-right: 5px"
          ></i>
          <div
            v-if="isOrganizationGroupConversation"
            style="
              display: flex;
              align-items: center;
              max-width: calc(100% - 60px);
            "
          >
            <h2 class="title single-line">{{ conversationTitle }}</h2>
            <p
              class="single-line"
              style="
                background: #3f64e4;
                border-radius: 2px;
                color: white;
                padding: 1px 2px;
                font-size: 9px;
              "
            >
              官方
            </p>
          </div>
          <div
            v-else-if="isExternalDomainSingleConversation"
            style="
              display: flex;
              align-items: center;
              max-width: calc(100% - 60px);
            "
          >
            <h2 class="title single-line">{{ conversationTitle }}</h2>
            <p
              class="single-line"
              style="
                color: #f0a040;
                border-radius: 2px;
                padding: 1px 2px;
                font-size: 9px;
              "
            >
              {{ domainName }}
            </p>
          </div>
          <h2 v-else class="title single-line">{{ conversationTitle }}</h2>
          <p class="time single-line">{{ source._timeStr }}</p>
        </div>
        <div class="content">
          <p
            class="draft single-line"
            v-if="shouldShowDraft"
            v-html="this.$xss(draft)"
          ></p>
          <p
            class="draft single-line"
            v-else-if="shouldShowVoipStatus"
            v-html="this.$xss(voipOngoingDesc)"
          ></p>
          <p class="last-message-desc single-line" v-else>
            <i v-if="unreadMention > 0">[有人@我]</i>
            {{ lastMessageContent }}
          </p>
          <i
            v-if="source.isSilent"
            class="icon-ion-android-notifications-off"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '../../../store'
import Draft from '../../util/draft'
import FileMessageContent from '../../../wfc/messages/fileMessageContent'
import Message from '../../../wfc/messages/message'
import wfc from '../../../wfc/client/wfc'
import NotificationMessageContent from '../../../wfc/messages/notification/notificationMessageContent'
import Config from '../../../config'
import ConversationType from '../../../wfc/model/conversationType'
import GroupType from '../../../wfc/model/groupType'
import WfcUtil from '../../../wfc/util/wfcUtil'
import SendMixMediaMessageView from '../view/SendMixMediaMessageView.vue'
import mitt from '@/kang/js/mitt'
import dayjs from 'dayjs'

export default {
  name: 'ConversationItemView',
  props: {
    source: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dragAndDropEnterCount: 0,
      shareConversationState: store.state.conversation,
      groupPortrait: Config.DEFAULT_GROUP_PORTRAIT_URL,
      mitt,
      dayjs,
    }
  },
  mounted() {
    // this.refreshGroupPortrait();
  },
  methods: {
    dragEvent(e, v) {
      if (v === 'dragenter') {
        this.dragAndDropEnterCount++
      } else if (v === 'dragleave') {
        this.dragAndDropEnterCount--
      } else if (v === 'drop') {
        this.dragAndDropEnterCount--
        let length = e.dataTransfer.files.length
        if (Config.ENABLE_MIX_MEDIA_MESSAGE) {
          this.$modal.show(
            SendMixMediaMessageView,
            {
              conversation: this.source.conversation,
              files: [...e.dataTransfer.files],
            },
            null,
            {
              name: 'send-mix-multi-media-message-modal',
              width: 600,
              height: 480,
              clickToClose: true,
            },
            {
              'before-close': null,
            }
          )

          return
        }
        if (length > 0 && length <= 5) {
          for (let i = 0; i < length; i++) {
            this.$eventBus.$emit('uploadFile', e.dataTransfer.files[i])
            store.sendFile(this.source.conversation, e.dataTransfer.files[i])
          }
        } else {
          // TODO
          let url = e.dataTransfer.getData('URL')
          if (url) {
            store.sendFile(this.source.conversation, url)
          } else {
            let text = e.dataTransfer.getData('text')
            if (text.startsWith('{')) {
              let obj = JSON.parse(text)
              let file = new FileMessageContent(
                null,
                obj.url,
                obj.name,
                obj.size
              )
              let message = new Message(this.source.conversation, file)
              wfc.sendMessage(message)
            }
          }
          console.log(
            this.$t('conversation.drag_to_send_limit_tip'),
            e.dataTransfer,
            e.dataTransfer.getData('URL')
          )
        }
      } else if (v === 'dragover') {
        // If not st as 'copy', electron will open the drop file
        e.dataTransfer.dropEffect = 'copy'
      }
    },
    imgUrlAlt(e) {
      if (this.source.conversation.type === ConversationType.Group) {
        e.target.src = Config.DEFAULT_GROUP_PORTRAIT_URL
      } else {
        e.target.src = Config.DEFAULT_PORTRAIT_URL
      }
    },

    showConversation() {
      store.setCurrentConversationInfo(this.source)
      if (this.unread > 0) {
        wfc.clearConversationUnreadStatus(this.source.conversation)
      }
      // this.refreshGroupPortrait();
    },
    showConversationInfoContextMenu(event) {
      this.$eventBus.$emit('showConversationContextMenu', [event, this.source])
    },
  },
  computed: {
    conversationTitle() {
      let info = this.source
      if (info.conversation._target) {
        return info.conversation._target._displayName
      }
      return ''
    },

    isOrganizationGroupConversation() {
      let info = this.source
      if (
        info.conversation.type === ConversationType.Group &&
        info.conversation._target &&
        info.conversation._target.type === GroupType.Organization
      ) {
        return true
      }
      return false
    },
    isExternalDomainSingleConversation() {
      let info = this.source
      if (
        info.conversation.type === ConversationType.Single &&
        WfcUtil.isExternal(info.conversation.target)
      ) {
        return true
      }
      return false
    },
    domainName() {
      let info = this.source
      if (
        info.conversation.type === ConversationType.Single &&
        WfcUtil.isExternal(info.conversation.target)
      ) {
        let domainId = WfcUtil.getExternalDomainId(info.conversation.target)
        let domainInfo = wfc.getDomainInfo(domainId)
        return '@' + domainInfo.name
      }
      return ''
    },
    shouldShowDraft() {
      if (
        this.shareConversationState.currentConversationInfo &&
        this.shareConversationState.currentConversationInfo.conversation.equal(
          this.source.conversation
        )
      ) {
        return false
      }
      if (
        this.source.unreadCount.unreadMention +
          this.source.unreadCount.unreadMentionAll >
        0
      ) {
        return false
      }
      let draft = Draft.getConversationDraftEx(this.source)
      return draft.text.trim() !== '' || draft.quotedMessage !== null
    },

    shouldShowVoipStatus() {
      return this.source._isVoipOngoing
    },

    draft() {
      let draft = Draft.getConversationDraftEx(this.source)
      let draftText = `<em>[${this.$t('common.draft')}]</em>` + draft.text
      draftText = draftText.replace(
        /<img [:a-zA-Z0-9_+; ,\-=\/."]+>/g,
        '[图片]'
      )
      draftText = draftText.replace(/&nbsp;/g, ' ')
      draftText = draftText.replace(/<br>/g, '')
      if (draft.quotedMessage) {
        draftText += '...'
      }
      return draftText
    },

    voipOngoingDesc() {
      let voipStatus = `<em>[音视频通话进行中]</em>`
      return voipStatus
    },

    lastMessageContent() {
      let conversationInfo = this.source
      if (
        conversationInfo.lastMessage &&
        conversationInfo.lastMessage.messageContent
      ) {
        let senderName = ''
        if (
          conversationInfo.conversation.type === 1 &&
          conversationInfo.lastMessage.direction === 1 &&
          !(
            conversationInfo.lastMessage.messageContent instanceof
            NotificationMessageContent
          )
        ) {
          if (conversationInfo.lastMessage._from) {
            senderName = conversationInfo.lastMessage._from._displayName + ': '
          } else {
            conversationInfo.lastMessage = store._patchMessage(
              conversationInfo.lastMessage,
              0
            )
            if (conversationInfo.lastMessage._from) {
              senderName =
                conversationInfo.lastMessage._from._displayName + ': '
            } else {
              senderName = '<' + conversationInfo.lastMessage.from + '>: '
            }
          }
        }
        return (
          senderName +
          conversationInfo.lastMessage.messageContent.digest(
            conversationInfo.lastMessage
          )
        )
      } else {
        return ''
      }
    },

    unread() {
      let conversationInfo = this.source
      let unreadCount = conversationInfo.unreadCount
      return unreadCount
        ? unreadCount.unread +
            unreadCount.unreadMention +
            unreadCount.unreadMentionAll
        : 0
    },
    unreadMention() {
      let conversationInfo = this.source
      let unreadCount = conversationInfo.unreadCount
      return unreadCount
        ? unreadCount.unreadMention + unreadCount.unreadMentionAll
        : 0
    },

    portrait() {
      let info = this.source
      if (info.conversation.type === ConversationType.Group) {
        if (info.conversation._target.portrait) {
          return info.conversation._target.portrait
        } else {
          return this.groupPortrait
        }
      } else {
        return info.conversation._target.portrait
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.collect-btn {
  height: 68px;
  padding: 12px;
}

.conversation-item-container {
  padding-left: 12px;
}

.conversation-item-container.drag {
  border: 1px solid var(--color-primary);
}

.conversation-item-container.active {
  background-color: var(--color-bg);
}

.conversation-item-container.top {
  background-color: #ebebeb;
}

.conversation-item-container.highlight {
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  z-index: 100;
}

.conversation-item-container.active.top {
  background-color: var(--color-bg);
}

.conversation-item {
  width: 100%;
  height: 68px;
  display: flex;
  /*border-bottom: 1px solid #eeeeee;*/
  align-items: center;
  justify-content: center;
}

.header {
  position: relative;
  margin-right: 12px;
}

.content-container {
  width: 100%;
  height: 45px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: 12px;
}

.content-container .title-time-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-content: center;
  justify-content: space-between;
}

.content-container .title-time-container .title {
  display: inline-block;
  font-size: 14px;
  color: #262626;
  font-style: normal;
  font-weight: normal;
  flex: 1;
}

.content-container .title-time-container .time {
  display: inline-block;
  color: var(--color-basic);
  font-size: 10px;
}

.content-container .content {
  display: flex;
  justify-content: space-between;
}

.content .draft {
  font-size: 12px;
  height: 20px;
  color: #b8b8b8;
}

/*refer to: https://blog.csdn.net/weixin_42412046/article/details/80804285*/
>>> .content .draft em {
  color: red;
  font-style: normal;
  padding-right: 5px;
}

.conversation-item-container.top .content .last-message-desc {
  color: #949494;
}

.content .last-message-desc {
  color: #acacac;
  font-size: 12px;
}

.content .last-message-desc i {
  font-style: normal;
  color: red;
}

.content i {
  color: #b8b8b8;
}
</style>
